<template>
  <div class="overview-panel panel">
    <h1>资源健康概览</h1>
    <div style="margin-bottom: 10px">
      <el-badge value="危险" class="badge" type="danger"/>
      <el-badge value="警告" class="badge" type="warning"/>
      <el-badge value="正常" class="badge" type="success"/>
      <el-badge value="低载" class="badge" type="info"/>
    </div>

    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6" v-for="item in summaryData" :key="item.resourceType">
        <el-card shadow="hover" class="resource-card">
          <div class="card-header">
            <span>{{ item.resourceType }}</span>
            <el-tag type="info">{{ item.instanceCount }} 个实例</el-tag>
          </div>

          <!-- CPU 异常 -->
          <div class="metric-item">
            <i class="el-icon-cpu icon-cpu"></i>
            <span class="label"> CPU </span>
            <el-badge :value="item.cpuDanger" class="badge" type="danger"/>
            <el-badge :value="item.cpuWarning" class="badge" type="warning"/>
            <el-badge :value="item.cpuNormal" class="badge" type="success"/>
            <el-badge :value="item.cpuLowLoad" class="badge" type="info"/>
          </div>

          <!-- 内存异常 -->
          <div class="metric-item">
            <i class="el-icon-memory icon-memory"></i>
            <span class="label"> 内存 </span>
            <el-badge :value="item.memDanger" class="badge" type="danger"/>
            <el-badge :value="item.memWarning" class="badge" type="warning"/>
            <el-badge :value="item.memNormal" class="badge" type="success"/>
            <el-badge :value="item.memLowLoad" class="badge" type="info"/>
          </div>

          <!-- 存储异常 -->
          <div class="metric-item">
            <i class="el-icon-box icon-storage"></i>
            <span class="label">存储 >80%</span>
            <el-badge :value="item.diskDanger" class="badge" type="danger"/>
            <el-badge :value="item.diskWarning" class="badge" type="warning"/>
            <el-badge :value="item.diskNormal" class="badge" type="success"/>
            <el-badge :value="item.diskLowLoad" class="badge" type="info"/>
          </div>

        </el-card>
      </el-col>
    </el-row>

    <el-button type="primary" @click="refresh" icon="el-icon-refresh">刷新数据</el-button>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import axios from 'axios';

// 📦 数据源（可切换）
const summaryData = ref([]);

// ✅ 测试数据（本地调试时使用）
const mockData = [
  {
    resourceType: '虚拟机',
    instanceCount: 100,

    cpuDanger: 19,
    cpuWarning: 11,
    cpuNormal: 12,
    cpuLowLoad: 13,

    memDanger: 12,
    memWarning: 21,
    memNormal: 19,
    memLowLoad: 11,

    diskDanger: 1,
    diskWarning: 12,
    diskNormal: 13,
    diskLowLoad: 31
  },
  {
    resourceType: 'MySQL',
    instanceCount: 3,

    cpuDanger: 1,
    cpuWarning: 1,
    cpuNormal: 1,
    cpuLowLoad: 1,

    memDanger: 1,
    memWarning: 1,
    memNormal: 1,
    memLowLoad: 1,

    diskDanger: 1,
    diskWarning: 1,
    diskNormal: 1,
    diskLowLoad: 1
  },
  {
    resourceType: 'MariaDB',
    instanceCount: 2,

    cpuDanger: 1,
    cpuWarning: 1,
    cpuNormal: 1,
    cpuLowLoad: 1,

    memDanger: 1,
    memWarning: 1,
    memNormal: 1,
    memLowLoad: 1,

    diskDanger: 1,
    diskWarning: 1,
    diskNormal: 1,
    diskLowLoad: 1,
  },
  {
    resourceType: 'Kafka',
    instanceCount: 4,

    cpuDanger: 1,
    cpuWarning: 1,
    cpuNormal: 1,
    cpuLowLoad: 1,

    memDanger: 1,
    memWarning: 1,
    memNormal: 1,
    memLowLoad: 1,

    diskDanger: 1,
    diskWarning: 1,
    diskNormal: 1,
    diskLowLoad: 1,
  },
  {
    resourceType: 'Redis',
    instanceCount: 2,

    cpuDanger: 1,
    cpuWarning: 1,
    cpuNormal: 1,
    cpuLowLoad: 1,

    memDanger: 1,
    memWarning: 1,
    memNormal: 1,
    memLowLoad: 1,

    diskDanger: 1,
    diskWarning: 1,
    diskNormal: 1,
    diskLowLoad: 1,
  }
];

// 🔁 刷新逻辑（可切换来源）
async function fetchData() {
  try {
    // 示例：使用真实 API 请求
    // const res = await axios.get('/api/monitor/overview');
    // summaryData.value = res.data;

    // ✅ 替换为测试数据（取消上面注释即可对接后端）
    summaryData.value = [...mockData];
  } catch (err) {
    console.error('获取概览数据失败', err);
    summaryData.value = [...mockData]; // 出错回退到测试数据
  }
}

function refresh() {
  fetchData();
}

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.overview-panel {
  padding: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
  margin-right: 10px;
  margin-left: 10px;
}

.resource-card {
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
  margin-bottom: 15px;
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.metric-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
  padding: 6px 10px;
  background-color: #f9f9f9;
  border-radius: 6px;
}

.metric-item.no-issue {
  background-color: #f0f9eb;
  color: #67c23a;
  justify-content: center;
  font-size: 13px;
}

.icon-cpu {
  color: #f56c6c;
  margin-right: 8px;
}

.icon-memory {
  color: #e6a23c;
  margin-right: 8px;
}

.icon-storage {
  color: #409EFF;
  margin-right: 8px;
}

.icon-ok {
  color: #67c23a;
  margin-right: 8px;
}

.label {
  flex: 1;
  font-size: 13px;
}

.badge {
  margin-left: auto;
}
</style>
